<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="custom-image" content="https://totemlife.cn/apps/public/avatar-3b-300x300.jpg">
    <meta name="description" content="{{lotteryActivity.activity_name}}">
    <title>会员抽奖活动专区</title>
    <!-- 添加 Bootstrap 样式链接 -->
    <link href="/apps/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="/apps/css/fontawesome-free-6.4.0-web/css/all.css">
    <!-- 添加自定义样式链接 -->
    <link rel="stylesheet" href="/apps/css/scratch-card.css">
    <style>
        body{
            background-image: url('https://totemlife.cn/apps/default-image');
            //background-color: #0f4c81;
            background-repeat: no-repeat; background-size: 100% 100%;
            background-position: center center; background-size: cover; -o-background-size: cover;
            -webkit-background-size: cover; -moz-background-size: cover;
            padding-bottom: 100px; min-height: 100vh; display: flex; flex-direction: column;
            opacity: 0.618;
        };
    </style>
    <script src="/apps/js/baidu-tongji-mtx.js"></script>
</head>
<body>
    <div class="container">

        <div class="row mt-5">
            <div class="col-12">
                <!-- 用户信息区域 -->
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">{{lotteryActivity.activity_name}}</h5>
                        <p class="card-text" id="collapsibleText">
                        </p>
                         <button class="btn btn-primary" type="button" data-bs-toggle="collapse" data-bs-target="#collapseText" aria-expanded="false" aria-controls="collapseText">
                            展开/收起 活动详情
                        </button>
                    </div>
                    <div class="collapse" id="collapseText">
                        <div class="card-body">
                            <p class="card-text">{{{lotteryActivity.activity_rules}}}</p>
                            <ul>
                                {{#each lotteryPrizes}}
                                <li>{{this.prize_name}}共{{initial_quantity}}，余{{remaining_quantity}}</li>
                                {{/each}}
                            </ul>
                            <p class="card-text">
                                奖池尚余{{remainingPrizes}}件，已有{{uniqueUidCount}}位用户抽中{{totalRecords}}件
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-5">
            <div class="col-12">
                <!-- 刮刮卡区域 -->
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">{{member.name}} 您还有{{remaining_attempts}}次抽奖机会</h5>
                        <p class="card-text"><span style='color:red;'>{{errMsg}}</span> 当前可用金豆：{{member.points}}粒</p>
                        <button class="btn btn-primary" id="scratch-button">{{buttonLabel}}</button>
                        <p class="card-text"></p>
                        <p class="card-text">首次注册 <a href="https://totemlife.cn/apps/go-to-weapp?view=profile">官网小程序</a> 可获1000金豆</p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-5">
            <div class="col-12">
                <!-- 抽奖结果 -->
                <div class="card">
                    <div class="card-body">
                        <h5 class="card-title">抽奖结果</h5>
                        <ul>
                            {{#each userLotteryResults}}
                            <li>{{this.added_at}} - {{{this.prize_tips}}}</li>
                            {{/each}}
                        </ul>
                        <p class="card-text" id="result-tips"></p>
                    </div>
                </div>
            </div>
        </div>

        <div class="row mt-5">
            <div class="col-12">
                <div class="text-center">
                        <p class="card-text" style="color:#ffffff">尽享畅通润和之美</p>
                        <img src={{qrImg}} alt="二维码" style="max-width: 80%; max-height: 128px;">
                        <p class="card-text" style="color:#ffffff;font-size:12px">图腾生命医学官方小程序</p>
                        {{!--
                        <img src="https://oss.foodtrust.cn//TT-profile-0-spreader-1414-routine.jpg" alt="二维码" style="max-width: 80%; max-height: 168px;">
                        --}}
                </div>
            </div>
        </div>



    </div>

    <!-- 添加 jQuery 和 Bootstrap 的 JavaScript 链接 -->
    <script src="/apps/js/jquery-3.7.1.min.js"></script>
    <script src="/apps/js/bootstrap.bundle.min.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <script src="/apps/js/wx-client-dom.js"></script>

    <script>
        // 在按钮点击后显示加载状态指示器
        document.addEventListener("DOMContentLoaded", function () {
            const uid = {{uid}};
            const balance = parseInt({{pointBalance}});
            const activityOnline = {{activityOnline}};
            const remaining_attempts = parseInt({{remaining_attempts}});
            const remainingPrizes = parseInt({{remainingPrizes}});
            const userDrawedCount = parseInt({{userDrawedCount}});
            const drawButton = document.getElementById("scratch-button");
            const resultTips = document.getElementById("result-tips");

            if (userDrawedCount > 0) {
                resultTips.innerHTML = "金豆及礼券已发放，请在小程序个人中心查看";
            }

            if (!activityOnline) {
                drawButton.disabled = true;
                return;
            }

            if (remainingPrizes < 1 ) {
                drawButton.innerHTML = '奖池已经清空，下次早点来领';
                drawButton.disabled = true;
                return;
            }

            if (remaining_attempts < 1) {
                drawButton.innerHTML = '机会已用完，推荐朋友来领吧';
                drawButton.disabled = true;
                return;
            };

            if (balance < 100 ) {
                drawButton.innerHTML = '金豆不足，去领点儿再来玩吧';
                drawButton.disabled = true;
                return;
            };

            let isDrawing = false; // 添加一个标志位来防止多次点击
            drawButton.addEventListener("click", async function () {

                if (isDrawing) {
                    return;
                }

                isDrawing = true;
                drawButton.disabled = true;

                // 显示加载状态
                drawButton.innerHTML = '<i class="fas fa-spinner fa-spin"></i> 正在抽奖...';
                try {
                    const response = await fetch("/apps/loyalty/scratch-card/{{lotteryActivity.activity_code}}", {
                        method: "POST",
                    });

                    if (response.ok) {
                        const result = await response.json();
                        // 根据抽奖结果更新页面上的显示
                        if (result.success && result.data) {
                            const resultMessage = `恭喜获得奖品：${result.data.prize_name}, ${result.data.tips} 【新的一年，要多吃图腾，成就更健康的自己！】`;
                            alert(resultMessage);
                        } else {
                            const resultMessage = result.message || '抽奖失败';
                            alert(resultMessage);
                        }
                        location.reload();
                    } else {
                        const resultMessage = "抽奖失败，请重试";
                        alert(resultMessage);
                        drawButton.innerHTML = '点击开始抽奖';
                        drawButton.disabled = false;
                        isDrawing = false;
                    }
                } catch (error) {
                    console.log('error: ',error);
                    const resultMessage = "抽奖请求异常，请重试";
                    alert(resultMessage);
                    drawButton.innerHTML = '点击开始抽奖';
                    drawButton.disabled = false;
                    isDrawing = false;
                }
            });
        });
    </script>

</body>
</html>

